<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生命周期</title>
</head>
<script type="text/javascript" src="../js/vue.js"></script>
<body>
<div id="root">
<h2 :style="{opacity}">欢迎学习Vue</h2>
    <button @click="stop()">点击停止变换</button>
    <hr>
    <h2>当前的n值是：{{n}}</h2>
    <button @click="add()">点击这个n+1</button>
    <button @click="bye()">点击销毁vm</button>
</div>
</body>
<script type="text/javascript">
    Vue.config.productionTip=false //阻止vue在启动时生成生产提示

    new Vue({
        el:'#root',
        data:{
            opacity:1,
            n:1
        },
        methods:{
         add(){
             this.n++
         },
            bye(){
             this.$destroy()//销毁vm
            },
            stop(){
                this.$destroy()//销毁vm
            }
        },
        //生命周期
        beforeCreate(){},//创建数据代理，监视之前
        created(){},
        beforeMount(){},
        //vue完成模板解析后并把真实的dom元素放入页面后***重要的钩子
        mounted(){
            this.timer= setInterval(()=>{
                this.opacity-=0.01
                if (this.opacity<=0)this.opacity=1
            },16)
        },
        beforeUpdate(){},//数据新的，页面数据还是旧的
        updated(){},//数据新的，页面数据也是新的
        beforeDestroy(){clearInterval(this.timer)},//*********重要的钩子
        destroyed(){}

    })
</script>
</html>